<template>
  <el-table
    class="api-table"
    :data="data"
    style="width: 100%;"
    max-height="800"
    row-key="prop_id"
    border
    :default-expand-all="true"
    :tree-props="{children: 'children'}"
  >
    <el-table-column prop="prop" label="属性值">
      <template slot-scope="scope">
        <span class="space">
          {{ scope.row.prop }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="label" label="属性说明">
      <template slot-scope="scope">
        <el-input v-model="scope.row.label" class="space" placeholder="" />
      </template>
    </el-table-column>
    <el-table-column prop="type" label="参数类型" width="110" align="center">
      <template slot-scope="scope">
        <span class="space">
          {{ scope.row.type }}
        </span>
      </template>
    </el-table-column>

    <el-table-column prop="note" label="UI字段" align="center" width="100">
      <template slot-scope="scope">
        <span class="space">
          <el-input v-model="scope.row.note" class="space" placeholder="" />
        </span>
      </template>
    </el-table-column>

    <el-table-column prop="required" align="center" label="是否必填" width="110">
      <template slot-scope="scope">
        <span v-if="scope.row.required" style="cursor: pointer;" @click="scope.row.required = 0">是</span>
        <span v-else style="cursor: pointer;" @click="scope.row.required = 1">否</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// import apiTag from './api-tag'

export default {
  components: {
    // apiTag
  },
  props: {
    data: {
      required: true,
      type: Array
    }
  },
  data: function() {
    return {
      options: [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 0
      }]
    }
  }
}
</script>

<style lang="scss">
.api-table {
    .space {
        letter-spacing: 1px;
        .el-input__inner {
            padding-left: 0px;
            border: 0px;
        }
    }
}
</style>
